<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>连接器基本测试</title>
    <style>
        .test-panel {
            border: 1px solid #ddd;
            padding: 20px;
            margin-top: 20px;
        }

        .connector-list {
            margin-top: 15px;
        }

        .connector-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        #testBtn {
            margin-left: 10px;
            height: 30px;
            margin-top: 20px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="test-panel">
        <h3>可用连接器</h3>
        <div class="connector-list">
            <div class="connector-item" data-id="1">CSV连接器</div>
            <div class="connector-item" data-id="2">自带JDBC连接器(不可删除)</div>
            <div class="connector-item" data-id="3">自定义JDBC连接器(插入前可删除)</div>
            <div class="connector-item" data-id="4">自定义Excel连接器(读取某个目录下特定前后缀的excel文件)</div>
        </div>
        <button id="testBtn">测试选中连接器</button>
        <div id="loading" style="display:none;margin-top:15px;">
            <div
                style="border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:0 auto;">
            </div>
            <p style="text-align:center;">处理中，请稍候...</p>
        </div>
        <div id="result" style="margin-top:15px;"></div>
    </div>
</body>
<script src="/js/pub.js"></script>
<script th:inline="javascript">
    var selectedId = null;

    // 选择连接器
    document.querySelectorAll('.connector-item').forEach(item => {
        item.addEventListener('click', function () {
            document.querySelectorAll('.connector-item').forEach(i => i.style.backgroundColor = '');
            this.style.backgroundColor = '#f0f0f0';
            selectedId = this.getAttribute('data-id');
        });
    });

    // 测试按钮点击
    document.getElementById('testBtn').addEventListener('click', async function () {
        if (!selectedId) {
            alert('请先选择一个连接器');
            return;
        }

        const btn = this;
        const loading = document.getElementById('loading');
        const resultDiv = document.getElementById('result');

        btn.disabled = true;
        loading.style.display = 'block';
        resultDiv.innerHTML = '';

        try {
            const response = await fetch('/flink-tests/run/' + selectedId,
                {
                    method: 'POST',
                    headers: { 
                        'Content-Type': 'application/json' ,
                        "auth2045":getLoginToken()
                    },
                    body: JSON.stringify({})
                }
            );
            const data = await response.text();

            try {
                const jsonData = JSON.parse(data);
                if (Array.isArray(jsonData)) {
                    // 构建表格显示JSON数组
                    let table = '<table border="1" style="width:100%;border-collapse:collapse;">';
                    // 表头
                    table += '<tr>';
                    Object.keys(jsonData[0]).forEach(key => {
                        table += `<th>${key}</th>`;
                    });
                    table += '</tr>';
                    // 数据行
                    jsonData.forEach(item => {
                        table += '<tr>';
                        Object.values(item).forEach(val => {
                            table += `<td>${val}</td>`;
                        });
                        table += '</tr>';
                    });
                    table += '</table>';
                    resultDiv.innerHTML = table;
                } else {
                    resultDiv.innerHTML = `<pre>${JSON.stringify(jsonData, null, 2)}</pre>`;
                }
            } catch (e) {
                // 不是JSON，直接显示
                resultDiv.innerHTML = `<pre>${data}</pre>`;
            }
        } catch (error) {
            resultDiv.innerHTML = `<div style="color:red;">请求失败: ${error.message}</div>`;
        } finally {
            btn.disabled = false;
            loading.style.display = 'none';
        }
    });
</script>

</html>